import React from 'react';
import { Link } from 'react-router-dom';
import { Table, Popconfirm, Button, message, Modal, Form, Input } from 'antd';
import BreadCrumb from '@/view/comps/breadcrub/breadcrub';
const FormItem = Form.Item;

const FORMINPUT = {
	labelCol: { span: 4 },
	wrapperCol: { span: 8 }
};
export default class Classify extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			currentPage: 1,
			classify: [],
			visible: false,
			confirmLoading: false,
			name: '',
			desc: '',
		};
		this.classify_id = '';
	}

	componentDidMount() {
		this.getClassify();
	}
	getClassify = () => {
		AJAX({
			url: '/findClassify',
			data: {}
		}).then(res => {
			this.setState({
				classify: res.data || []
			});
		}, err => message.error(err.msg));
	}
	deleteClassify = (_id) => {
		AJAX({
			url: '/deleteClassify',
			data: {_id}
		}).then(res => {
			message.success('删除成功');
			this.getClassify();
		}, err => message.error(err.msg));
	}
	updateClassify = () => {
		this.setState({confirmLoading: true});
		const reqParam = {
			name: this.state.name,
			desc: this.state.desc,
			_id: this.classify_id
		};
		AJAX({
			url: '/updateClassify',
			data: reqParam,
		}).then(res => {
			message.success('修改成功');
			this.getClassify();
			this.setState({confirmLoading: false, visible: false});
		}, err => {
			message.error(err.msg);
			this.setState({confirmLoading: false});
		});
	}

	renderTable = () => {
		const columns = [
			{
				title: '名称',
				align: 'center',
				dataIndex: 'name',
			}, 
			{
				title: '创建时间',
				align: 'center',
				dataIndex: 'createTime',
			},
			{
				title: '描述',
				align: 'center',
				dataIndex: 'desc',
			}, 
			{
				title: '操作',
				align: 'center',
				dataIndex: 'operation',
				render: (text, row) => {
				  return (
						<React.Fragment>
							<span className="blue mr-10" onClick={() => {
								this.setState({
									visible: true,
									name: row.name,
									desc: row.desc,
								});
								this.classify_id = row._id;
							}}>修改</span>
							<Popconfirm 
								title="确定要删除吗?" 
								okText="确定"
								cancelText="取消"
								onConfirm={() => this.deleteClassify(row._id)}>
								<span className="blue ml-10">删除</span>
							</Popconfirm>
						</React.Fragment>
				  );
				},
			}
		];
		return (
			<Table 
				dataSource={this.state.classify} 
				columns={columns} 
				bordered
				rowKey="_id"
				pagination={{current: this.state.currentPage, onChange: this.onChangePage, showTotal: total => `总计 ${total} 条`}}
			/>
		);
	}

	renderModal = () => {
		const { visible, confirmLoading, name, desc } = this.state;
		return (
			<Modal title="修改分类信息"
				visible={visible}
				onOk={this.updateClassify}
				confirmLoading={confirmLoading}
				onCancel={() => this.setState({visible: false})}
			>
				<Form>
					<FormItem {...FORMINPUT} label="名称">
						<Input
							value={name} 
							onChange={e => this.setState({name: e.target.value})}
							placeholder="请输入名称" />
					</FormItem>

					<FormItem {...FORMINPUT} label="描述">
						<Input 
							value={desc}
							onChange={e => this.setState({desc: e.target.value})}
							placeholder="请输入标签描述" />
					</FormItem>
				</Form>
			</Modal>
		);
	}
	render() {
		return (
			<div>
				<BreadCrumb bread={[{title: 'Dashboard', link: '/'}, {title: '分类管理'}]}/>
				<div className="page-container">
					<Link to={'/app/classify/addClassify'}><Button type="primary" className="mb-10">新增分类</Button></Link>
					{this.renderTable()}
					{this.renderModal()}
				</div>
			</div>
		);
	}

	onChangePage = (page) => {
		this.setState({currentPage: page});
	}
}
